
<head>
    <title>Example: Simple Package</title>
    <meta charset="utf-8">
    <link href="../base1/cockpit.css" type="text/css" rel="stylesheet">
    <script src="../base1/cockpit.js"></script>
</head>
<body>
    <div class="container-fluid">
        <h2>Example: Simple Package</h2>

        <p>This example is an installable cockpit package that runs a simple command
            to ping a remote address.</p>

        <p>Link the package into your home directory:</p>
        <ol>
            <li>Make sure Cockpit works on the local machine.</li>
            <li>Link this directory into your home directory:
<pre>$ mkdir -p ~/.local/share/cockpit
$ ln -snf $(pwd) ~/.local/share/cockpit/playground
$ sudo systemctl restart cockpit</pre>
</li>
            <li>Log into cockpit using your web browser, with the same account as the above.</li>
            <li>Choose this item from the sidebar menu</li>
            <li>Feel free to edit this file and refresh in the browser.</li>
        </ol>
    </div>

    <div class="container-fluid">
        <table class="form-table-ct">
            <tr>
                <td><label class="control-label" for="address">URL</label></td>
                <td><input class="form-control" id="address" value="8.8.8.8"></td>
            </tr>
            <tr>
                <td><button class="pf-c-button pf-m-secondary pf-m-primary" id="ping">Ping</button></td>
                <td><button class="pf-c-button pf-m-secondary pf-m-danger" disabled id="stop">Stop</button></td>
            </tr>
        </table>
        <p>
            <pre id="output" style="display: none;">
            </pre>
        </p>
        <p id="failure" class="warning"></p>
    </div>

    <script>
        var channel = null;
        var stop = document.getElementById("stop");
        var ping = document.getElementById("ping");
        ping.onclick = function() {
            var output = document.getElementById("output");
            output.innerHTML = "";
            output.setAttribute("style", "display: block;");

            if (channel)
                channel.close("terminated");

            var failure = document.getElementById("failure");
            failure.innerHTML = "";

            var address = document.getElementById("address");
            var options = {
                "payload": "stream",
                "spawn": [ "ping", address.value ],
                "err": "out",
            };
            channel = cockpit.channel(options);
            channel.onmessage = function(ev, data) {
                console.log("message", ev, data);
                output.appendChild(document.createTextNode(data));
            };
            channel.onclose = function(ev, options) {
                console.log("close", ev, options);
                if (options.problem)
                    failure.innerHTML = options.problem;
            };
            stop.removeAttribute("disabled");
        };
        stop.onclick = function() {
            stop.setAttribute("disabled", "disabled");
            if (channel)
                channel.close("terminated");
            channel = null;
        };
    </script>
</body>
</html>

